<template>
    <div class='content' style="background: #fff">
        <div class="profile_page">
                <head-top  :go-back='goBack'  :head-title="profiletitle"></head-top>
        </div>
        <div class="header" v-if='userInfo.person'>
            <div class="user-info">

                <div class="profile-wrap">
                    <van-image
                            class="profile-img"
                            :src="photo"
                            round
                    >
                    </van-image>
                </div>
                <div class="info-detail">
                    <div class="info-wrap">
                        <img src="../../assets/image/xingming2.png" alt="">
                        <span>{{userInfo.person.name}}</span>
                    </div>
                    <div class="info-wrap">
                        <img src="../../assets/image/sex.png" alt="">
                        <span>{{sex}}</span>
                    </div>
                    <div class="info-wrap">
                        <img src="../../assets/image/post1.png" alt="">
                        <span>{{userInfo.person.deptName}}</span>
                    </div>
                    <div class="info-wrap">
                        <img src="../../assets/image/bumen1.png" alt="">
                        <span>{{userInfo.person.postName}}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="myInfo" v-if='userInfo.person'>
            <!--<div class="infoTop" >
                    <div>
                      <img :src="photo" id="errorImg">
                      &lt;!&ndash;<img v-if="url==''&&photo==null&&sex=='男'" src="@/assets/images/img/man.png" >
                      <img v-if="url==''&&photo==null&&sex=='女'" src="@/assets/images/img/women.png">&ndash;&gt;
                      <p>{{userInfo.person.name}}</p>
                    </div>
            </div>-->
            <div class="infoContent">
                    <!--<titlebar :titleLeft='titleLeft'></titlebar>-->
                    <div class="infoTitle">基本信息</div>
                    <ul>
						<li><span class="label">工号</span>：<span>{{userInfo.person.personCode}}</span></li>
                        <li><span class="label">出生日期</span>：<span>{{userInfo.person.birth}}</span></li>
                        <li><span class="label">年龄</span>：<span>{{userInfo.person.age}}</span></li>
                        <li><span class="label">籍贯</span>：<span>{{userInfo.person.residentPlace}}</span></li>
                        <!-- <li><span class="label">出生地</span>：<span>{{userInfo.person.nationality}}</span></li> -->
						<li><span class="label">婚姻状况</span>：<span>{{userInfo.person.maritalStatus}}</span></li>
						<li><span class="label">政治面貌</span>：<span>{{userInfo.person.partyFigure}}</span></li>
                        <li><span class="label">职称类别</span>：<span>{{userInfo.person.titleType}}</span></li>
                        <li><span class="label">职称级别</span>：<span>{{userInfo.person.titleLevel}}</span></li>
                        <li><span class="label">职（执）业资格</span>：<span>{{userInfo.person.workQualification}}</span></li>

                        <!-- <li><span class="label">身份证号</span>：<span>{{userInfo.person.idNum}}</span></li>
                        <li><span class="label">政治面貌</span>：<span>{{userInfo.person.partyFigure}}</span></li>
                        <li><span class="label">职称类别</span>：<span>{{userInfo.person.titleCategory}}</span></li>
                        <li><span class="label">职称级别</span>：<span>{{userInfo.person.technicalTitleGrade}}</span></li>
                        <li><span class="label">职（执）业职格</span>：<span>{{userInfo.person.professionalQualification}}</span></li> -->

                    </ul>
                    <div class="infoTitle">联系信息</div>
                    <ul>
                        <li><span class="label">本人联系方式</span>：<span>{{userInfo.contrctCollection[0].telPhone}}</span></li>
                        <li><span class="label">紧急联系人</span>：<span>{{userInfo.contrctCollection[0].emergencyMan}}</span></li>
                        <li><span class="label">与紧急联络人关系</span>：<span>{{userInfo.contrctCollection[0].emeRelation}}</span></li>
                        <li><span class="label">紧急联络人电话</span>：<span>{{userInfo.contrctCollection[0].emeLandPhone}}</span></li>
						<li><span class="label">家庭地址</span>：<span>{{userInfo.contrctCollection[0].homeAdress}}</span></li>
						<li><span class="label">现居住地址</span>：<span>{{userInfo.contrctCollection[0].liveAdress}}</span></li>
                    </ul>
                <div class="infoTitle">工作信息</div>
                <ul>
                    <li><span class="label">参加工作时间</span>：<span>{{userInfo.person.workTime}}</span></li>
                    <li><span class="label">入职本公司时间</span>：<span>{{userInfo.person.inOrgTime}}</span></li>
                    <li><span class="label">人员状态</span>：<span>{{userInfo.person.perState | translate('0145')}}</span></li>
                    <li><span class="label">职务</span>：<span>{{userInfo.person.duty}}</span></li>
                    <li><span class="label">职级</span>：<span>{{userInfo.person.postRank}}</span></li>
										<!-- <li><span class="label">职务层级</span>：<span>{{userInfo.person.jobLevel}}</span></li>
										<li><span class="label">薪资类型</span>：<span>{{userInfo.person.salaryType}}</span></li>
										<li><span class="label">是否外派</span>：<span>{{userInfo.person.assignFlag}}</span></li> -->
                </ul>
                <div class="infoTitle">学历信息</div>
                <ul>
                    <li><span class="label">最高学历</span>：<span>{{userInfo.person.maxEducation}}</span></li>
                    <li><span class="label">最高学历所在学校</span>：<span>{{userInfo.person.maxEducationSchool}}</span></li>
					<li><span class="label">最高学位</span>：<span>{{userInfo.person.maxDegree}}</span></li>
					<li><span class="label">最高学位所在学校</span>：<span>{{userInfo.person.maxDegreeEducationSchool}}</span></li>
                </ul>
               <!-- <div class="infoTitle">其它信息</div>
                <ul>
                    <li><span class="label">社保缴纳地</span>：<span>{{userInfo.person.siPayArea| translate('1064')}}</span></li>
                    <li><span class="label">社保户口类别</span>：<span>{{userInfo.person.residentType| translate('3017')}}</span></li>
                    <li><span class="label">公积金缴纳地</span>：<span>{{userInfo.person.fundArea | translate('1064')}}</span></li>
                    <li><span class="label">银行卡号</span>：<span>{{userInfo.person.bankCardNumber}}</span></li>
                    <li><span class="label">开户行名称</span>：<span>{{userInfo.person.nameOfOpeningBank}}</span></li>
                </ul> -->
            </div>
        </div>

    </div>
</template>

<script>
    import headTop from '@/components/header/head'
    import Calendar from '@/components/calendar/calendar';
    import titlebar from '@/components/titlebar2/titlebar2';
    import imageCropper from '@/components/imageCropper/imageCropper'
    import Cropper from "cropperjs";
    import {dictNum,getUserBaseInfo} from '@/service/getData';
    import {mapState, mapMutations} from 'vuex'
    import {getStore,getDefault,contextRoot} from '@/assets/config/mUtils';
    import { Dialog,Toast} from 'vant';
    export default {
			name: "myInfo",
      data() {
        return {
          profiletitle: '员工信息',
          goBack: true,
          userInfo: '',
          contactInfo:{},
          titleLeft: '基本信息',
          titleLeft1: '身份标识',
          titleLeft2: '荣誉标识',
          age: 0,
          sex: '',
          marryStatus: '',
          idType: '',
          maxeducation: '',
          personstudy: [],
          photo: '',
          url: '',
        }
      },
      created(){
	      var data = getDefault();
				let userId = this.$route.query.id?this.$route.query.id:getStore('user_id')
	      getUserBaseInfo({id:userId}).then(res => {
		      console.log(res);
		      this.USERINFO(res.data);
		      this.userInfo = res.data;
		      this.sex = res.data.person.sex;
		      var marryDict = res.data.person.maritalStatus;
		      var maxeducation = res.data.person.education;
		      var idTypeDict = res.data.person.idType;
					var perStateDict = res.data.person.perState;
//          this.photo = res.data.person.photo;
		      if(res.data.person.photo ==''||res.data.person.photo ==null){
			      if(res.data.person.sex == '男'){
				      this.photo = require('@/assets/images/img/man_moren.png');
			      }else {
				      this.photo = require('@/assets/images/img/girl_moren.png');
			      }
		      }else {
//	          var interfaceUrl = 'http://www.chengzhenguanli.com:8080/eHR';
			      var interfaceUrl = contextRoot();
			      var checkTime = new Date().getTime().toString();
						this.photo = interfaceUrl+ '/api/file/att/download?fileId='+(res.data.person.photo.base64Encode())+'&app_userId='+getStore('user_id')+'&CHECK_TIME='+ checkTime+'&CHECK_SIGN='+ this.$md5(getStore('user_id') + checkTime + "3a28fba00c015e0df7f88556c91cb7fc");
								
			      // this.photo = interfaceUrl+ '/api/file/att/download?fileId='+res.data.person.photo+'&app_userId='+getStore('user_id')+'&CHECK_TIME='+ checkTime+'&CHECK_SIGN='+ this.$md5(getStore('user_id') + checkTime + "3a28fba00c015e0df7f88556c91cb7fc");
		      }
					/*婚姻状态*/
// 					dictNum(perStateDict).then(res => {
// 						this.userInfo.person.perState = res.data.data.text;
// 					});

		      this.$nextTick(function () {
//              if(this.photo != null){
//                var that = this;
//                document.getElementById("errorImg").onerror = function () {
//                  that.photo = null;
//                };
//              }

		      });

	      });
      },
			filters:{
				translate(val,type){
					let dict = getStore('codeSet');
					var arr = JSON.parse(dict)[type].filter(item => item.id == val);
					if(arr[0]){
						return arr[0].text
					}else{
						return ""
					}
					console.log(type)
				}
			},
      mounted() {





      },
      components: {
        headTop,
        Calendar,
        titlebar,
        imageCropper
      },
      methods: {
        ...mapMutations([
          'USERINFO',
        ]),
        errorImg(){
          alert();
        },
        goHonor(state){
          this.$router.push(
            { name: 'honorLists', params: { state: state }}
          );
        }
        }
    }

</script>

<style lang="scss" scoped>
    @import '../../assets/style/mixin';
    @import '../../assets/style/public';
    .myInfo{
        padding: .4rem;
        .infoTop{
            width: 100%;
            height: 5.64rem;
            background: url('../../assets/images/img/infoBg.png') no-repeat;
            /*background: linear-gradient(-90deg, #fe2330 0%, #e50010 100%);*/
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: .4rem;
            div{
                text-align: center;
                img{
                    width: 2.2rem;
                    height: 2.2rem;
                    border-radius: 50%;
                }
                p{
                    font-size: .6rem;
                    color: #fff;
                    margin-top: .3rem;
                }
            }
        }
        .infoContent{

            font-size: .48rem;
            color: #717171;
            line-height: 1.2rem;
            .infoTitle{
                font-size: 0.54rem;
                color: #333;
                padding-left: 1.8rem;
                position: relative;
                &:before{
                    position: absolute;
                    content: "";
                    width: 14px;
                    height: 14px;
                    border-radius: 4px;
                    left: 0.8rem;
                    top: 0.3rem;
                    background: #5082d8;
                }
            }
            ul{
                background: #fff;
                padding: 0rem 0 0.2rem;
                border-bottom-left-radius: 4px;
                border-bottom-right-radius: 4px;
               /* margin-bottom: .4rem;*/
                li{
                    padding-left: .9rem;
                    .label{
                        display: inline-block;
                        /*width: 4.4rem;
                        text-align: justify;
                        text-align-last: justify;*/
                        color: #bbb;
                    }
                    span{
                        color: #151515;
                    }
                    div{
                        padding-bottom: 1rem;
                        p{
                            color: #555;
                            font-size: .56rem;
                            line-height: 1.12rem;
                            &.time{
                                color: #666;
                            }
                        }
                    }
                }
                &.multirecord{
                    /*padding-left: 1.2rem;*/
                    position: relative;
                    display: flex;
                    flex-direction: row;
                    overflow: hidden;
                 /*   &::after{
                        content: '';
                        position:absolute;
                        width: 2px;
                        height: 100%;
                        background: #eaefff;
                        top: 1rem;
                        left: 1.2rem;

                    }*/
                    li{
                        position: relative;
                        display: flex;
                        flex-direction: column;
                       /* width: 2rem;*/
                        align-items: center;
                        justify-content: center;
                        padding-left: 0;
                      flex-grow: 1;
                      img{
                        width: 1.2rem;
                        height: 1.2rem;
                      }
                        /*&:before{
                            background-color: #cad9ff;
                            content: '';
                            display: inline-block;
                            width: .56rem;
                            height: .56rem;
                            position: absolute;
                            border-radius: 50%;
                            left: -.2rem;
                            z-index: 10;
                            top: .3rem;
                        }
                        &::after{
                            background-color: #83a5ff;
                            content: '';
                            display: inline-block;
                            width: .36rem;
                            height: .36rem;
                            position: absolute;
                            border-radius: 50%;
                            left: -.1rem;
                            z-index: 10;
                            top: .4rem;
                        }*/
                    }
                }
            }
        }
    }
    .header {
        position: relative;
        background: url("../../assets/image/headimage.png") no-repeat;
        background-size: 100% 100%;
        width: 100%;
        //  height: 400px;
        /*padding-top: 1.4rem;*/
        .back-img {
            top: 0;
            position: absolute;
            width: 100%;
            // background: url('../../assets/image/headimage.png')  no-repeat;
            // background-size:100%;
            height: 90.5px;
            background: orange;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .user-info {
            // height: 8.6rem;
            /*margin-left: 1rem;*/
            /*margin-right: 1rem;*/
            /*background: #ffffff;
            box-shadow: 0 4px 5px 0 #ebebeb;*/
            border-radius: 6px;
            padding: 1rem 0.5rem 1rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin:0 1rem 0.1rem 1rem;
            .profile-wrap {
                flex: 0 0 4.5rem;

                .profile-img {
                    width: 4.23rem;
                    height: 4.5rem;
                }

            }

            .info-detail {
                margin-left: 0.6rem;

                >div:nth-child(2) {
                    margin-top: 0.2rem;
                    margin-bottom: 0.2rem;
                }
                >div:nth-child(3) {
                    margin-top: 0.2rem;
                    margin-bottom: 0.2rem;
                }
                .info-wrap {
                    display: flex;
                    align-items: center;

                    span {
                        margin-left: 0.8rem;
                        font-size: 0.6rem;
                        font-weight: 500;
                        line-height: 1rem;
                        color: #fff;
                    }



                }

            }

            // .user-info-wrap {
            //  width: 100%;
            // height: 100px;
            // margin-left: 16px;
            // margin-right: 16px;
            // background: yellowgreen;
            // }

            // top: 100px;
        }
    }

</style>
